@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';

[v-cloak] {
  display: none !important;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

// label {
//   font-weight: 700;
// }

html {
  height: 100%;
  box-sizing: border-box;
}

#app{
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  outline: none;
  text-decoration: none;
}

div:focus{
  outline: none;
 }

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//main-container全局样式
.app-main{
  min-height: 100%
}

.app-container {
  padding: 25px;
  padding-top: 75px;
  min-height: 100vh;
}

.width-100 {
  width:100%;
}

.bg-white {
  background-color: white;
}

.bg-gray {
  background-color: $gray;
}

.bg-green {
  background-color: $panGreen;
  border-color: $panGreen;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.cursor-p {
  cursor: pointer;
}

.cursor-p:hover {
  color: $panGreen;
}

.el-tabs--border-card>.el-tabs__header .el-tabs__item{
  color: #e1e2e3;
}
.el-tabs__item {
  text-align: center;
  font-size: 16px;
  width: 120px;
  height: 50px;
  line-height: 50px;
}
body .el-table th.gutter{
    display: table-cell!important;
}
.el-form-item__label{
  padding-right: 30px;
}

//checkbox 设置checkbox的颜色
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: $panGreen;
  border-color: $panGreen;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: $panGreen;
}

//el-table 设置每个格左右padding相等
.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
  padding-left: 14px;
}

// 设置table行距
.el-table td, .el-table th{
  padding: 4px 0;
}
//设置排序按钮颜色
.el-table .ascending .sort-caret.ascending {
    border-bottom-color: $panGreen;
}
.el-table .descending .sort-caret.descending {
    border-top-color: $panGreen;
}
//设置单选按钮的样式
.el-radio__input.is-checked .el-radio__inner {
  border-color: $panGreen;
    background: $panGreen;
}
.el-radio__input.is-checked+.el-radio__label {
  color: $panGreen;
}
//设置分页panel的字体颜色
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-top:hover {
  color: $panGreen;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
  color: $panGreen;
}

.el-tabs__item:hover{
  color: $panGreen;
}
.el-tabs__item.is-active{
  color: $panGreen;
}

.el-tabs__active-bar{
  background-color: $panGreen;
}
//设置dialog的内容间距
.el-dialog--center .el-dialog__body{
  padding: 10px 25px;
}
//设置面包屑的hover样式
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{
  color: $panGreen;
}
//设置侧边栏收起时的图标间距
.el-menu--vertical{
  .svg-icon{
    margin-right: 10px;
  }
}
//设置单张图片上传样式
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

// layout
@mixin flex-row($row:center,$col:center) {
  display: flex;
  flex-direction: row;
  align-items: $row;
  justify-content: $col;
}
.flex-row{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-between{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

@mixin margin($top:0px,$right:0px,$bottom:0px,$left:0px) {
  margin: $top $right $bottom $left;
}

@mixin padding($top:0px,$right:0px,$bottom:0px,$left:0px) {
  padding: $top $right $bottom $left;
}

.margin-top-20 {
  margin-top: 20px;
}

.pagination{
  @extend .text-right;
  @include margin(16px);
}

// 设置预览图片最大宽度
.el-image-viewer__canvas{
  max-width: 1200px;
  margin: auto;
}

.el-image{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.el-alert{
  padding: 0;
  line-height: 26px;
}
